<template>
  <div class="box">
     <el-form label-position="right" label-width="80px" :model="form">
  <el-form-item label="账号：">
    <el-input v-model="form.user" placeholder='请输入账号'></el-input>
  </el-form-item>
  <el-form-item label="密码：">
    <el-input v-model="form.password" placeholder='请输入密码'></el-input>
  </el-form-item>
   <el-form-item>
    <el-button type="primary" @click="onSubmit">立即登录</el-button>
    <el-button @click="register">注册</el-button>
  </el-form-item>
</el-form>

  </div>
</template>

<script>

import qs from 'qs'
export default {
data(){
    return{
        form:{
            user:'',
            password:''
        }
    }
},
methods:{
    onSubmit(){

      this.$request({
        url:'/login',
        method:'post',
        data:qs.stringify(this.form)
      }).then((success)=>{
        if(success){
          localStorage.setItem('token',success.data.token)
          this.$router.push('/home')
        }else{
          alert('用户名或密码错误')
        }
      })
    },
    register(){
     if(this.form.user.trim()&& this.form.password.trim()){
      this.$request({
        url:'/registe',
        method:'post',
        data:qs.stringify(this.form)
      }).then((success)=>{
        if(success.data.msg=='注册成功'){
            this.regSuccess()
        }
      })
    
     }else{
       alert('未检测合法值')
     }
    },
    regSuccess() {
        this.$notify({
          title: '成功',
          message: '注册成功！',
          type: 'success'
        });
      }
}
}
</script>

<style scoped>
.box{
    width: 500px;
    margin: 0 auto;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translateX(-50%) translateY(-50%);
    background-color: #f4f4f4;
    text-align: center;
    padding: 20px;
    border-top: 5px solid #409eff;
     box-shadow: 0 2px 4px rgba(0, 0, 0, .12), 0 0 6px rgba(0, 0, 0, .04);
     border-radius: 4px
}
.input{
    display: flex;
    margin-bottom: 20px;
}
</style>